<template>

    <!-- <el-date-picker v-model="selectDate" type="date" placeholder="Pick a day" @change="handleSelectDate" />
    <el-button icon="ArrowLeft" circle @click="handleLeftBtn" />
    <el-button icon="ArrowRight" circle @click="handleRightBtn" /> -->   
    <div style="display: flex;height:100%;">
        <div style="background-color: red;min-width:230px;">sadflksdajfl </div>
        <div  id="mycalendar" style="width: 100%;height: 100%">
    </div>
    </div>  
 
    <div id="popup" style="position:  baseline; left:'500px',top:'500px'; z-index:9999; background-color: red">
        <p>这是一个弹窗</p>
    </div>
     
</template>
<script>
import Calendar from '@toast-ui/calendar';
// import '@toast-ui/calendar/dist/toastui-calendar.min.css';
import { setStore, getStore } from '@/utils/store';
import "./toastui-calendar.min.css"
// import 'tui-date-picker/dist/tui-date-picker.min.css';
// import 'tui-time-picker/dist/tui-time-picker.min.css';
import dayjs from 'dayjs'
import { v4 as uuidv4 } from 'uuid'
import { mapGetters } from 'vuex';

export default {
    data() {
        return {
            useCreatePopup: false,
            useDetailPopup: false,
            calendar: undefined,
            selectDate: '',
            isinit:true,
        }
    }, 
    methods: {
        init() {
            const that = this;
            this.calendar = new Calendar('#mycalendar', { 
                defaultView: 'week',
                scheduleView: ['time'],
                useFormPopup: this.useCreatePopup,
                useDetailPopup: this.useDetailPopup,
                usageStatistics: false,
                isReadOnly:true,//禁止拖拉拽编辑               
                template: {
                // 自定义事件内容渲染                
                    timegridDisplayPrimaryTime({ time }) { //左边时间显示内容
                        return `${dayjs(time).format('HH:mm')}`
                    },
                    milestone: function (model) {
                        // return '<span style="background-color: ' + model.bgColor + '">' + model.title + '</span>';
                        return 'fsadfsdafsdaf';
                    },
                    time(event) {
                        console.log(`output->event`,event)
                     

                        return `<div style=" 
                                width:100%;
                                height:100%;
                                color:#FFF;">${event.title}</div>`;
                    },
                    
                   
                },
                week: {
                    // taskView: false
                    dayNames: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
                    startDayOfWeek: 1,
                    narrowWeekend: false,
                    workweek: false,
                    showNowIndicator: true,
                    showTimezoneCollapseButton: false,
                    timezonesCollapsed: false,
                    hourStart: 0,
                    hourEnd: 24,
                    eventView: ['time'],
                    taskView: false,
                    collapseDuplicateEvents: false,
                },
                disableResizing: true, // 禁止拉伸
                disableDrag: true // 禁止拖动
            });
            this.calendar.createEvents([
                {                    
                    id: uuidv4(),
                    title: 'Weekly Meeting',
                    start: new Date(Date.now()),
                    end: new Date(Date.now() + 150 * 60 * 1000),
                    color:'#FFF',   
                    backgroundColor: 'red',
                    dragBackgroundColor: 'red',
                    borderColor: 'red',                      
                },
                {                    
                    id: uuidv4(),
                    title: 'Weekly Meeting',
                    start: new Date(Date.now()),
                    end: new Date(Date.now() + 60 * 60 * 1000),
                    color:'#FFF',   
                    backgroundColor: 'red',
                    dragBackgroundColor: 'red',
                    borderColor: 'red',                      
                },
            ]);
            // 创建
            this.calendar.on("beforeCreateEvent", (e) => {
                console.log("创建", e)
                this.calendar.createEvents([
                    {
                        id: uuidv4(),
                        calendarId: 'cal1',
                        title: e.title,
                        start: e.start.d.d,
                        end: e.end.d.d,
                        isAllday: e.isAllday,
                        location: e.location,
                        state: e.state,
                        color: '#fff',
                        backgroundColor: 'red',
                        dragBackgroundColor: 'red',
                        borderColor: 'red', 
                        customStyle: {
                            fontStyle: 'italic',
                            fontSize: '15px',
                        },
                    }, // EventObject
                ])
            })
            //修改
            this.calendar.on('beforeUpdateEvent', (e) => {
                console.log("修改", e)
                const targetEvent = e.event;
                const changes = { ...e.changes };
                this.calendar.updateEvent(targetEvent.id, targetEvent.calendarId, changes);
            });
            //删除
            this.calendar.on('beforeDeleteEvent', (e) => {
                console.log("删除", e)
                this.calendar.deleteEvent(e.id, e.calendarId);
            });

            this.calendar.on('clickEvent', (e) => {
                const schedule = e.schedule;
                const popup = document.getElementById('popup');
                // popup.style.display = 'flex'; // 显示弹窗
                let offset = 230;
                
                if(that.isinit)
                {
                    if( that.$store.getters.isCollapse){
                        offset = 48; 
                    } else{
                        offset = 218;      
                    }  
                    that.isinit = false;
                }
                else{
                    if( that.$store.getters.isCollapse){
                        offset = 60; 
                    }
                } 
                console.log(`output->offset`, offset)

                 
                if( e.nativeEvent.srcElement.className ==="toastui-calendar-event-time-content"){
                    popup.style.left = e.nativeEvent.srcElement.getClientRects()[0].right-offset +1+ 'px';  
                    popup.style.top = e.nativeEvent.srcElement.getClientRects()[0].top  +1+ 'px';
                    popup.style.position = "absolute"; 
                }else{
                    popup.style.left = e.nativeEvent.srcElement.parentElement.parentElement.getClientRects()[0].right-offset   +1+ 'px'; 
                    popup.style.top = e.nativeEvent.srcElement.parentElement.parentElement.getClientRects()[0].top   +1+'px';
                    popup.style.position = "absolute";  
                }
                console.log(`output-> popup.style.left popup.style.left`, popup.style.left)

               

            });



        },
        handleLeftBtn() {
            this.calendar.prev()
        },
        handleRightBtn() {
            this.calendar.next()
        },
        handleSelectDate() {
            this.calendar.setDate(this.selectDate)
        }
    },
    mounted() {
        this.init()
    }
}
</script>
<style lang="scss" scoped> 
.sdfasd {     
    position: relative;
    height: 100%
}
// :deep(.toastui-calendar-event-time) {
//     box-shadow: 0 2px 2px -2px rgba(34, 47, 62, 0.1), 0 8px 8px -4px rgba(34, 47, 62, 0.6);  
// }
:deep(.toastui-calendar-event-time:hover) {
    box-shadow: 0 2px 2px -2px rgba(34, 47, 62, 0.1), 0 8px 8px -4px rgba(34, 47, 62, 0.6);  
}
// :deep(.toastui-calendar-event-time:active) {
//     box-shadow: 0 2px 2px -2px rgba(34, 47, 62, 0.1), 0 8px 8px -4px rgba(34, 47, 62, 0.6);  
// }
</style>